<template>
  <div class="container">
    <!-- 标题：近期会议 -->
    <h2 class="mx-1" type="info" size="large">近期会议</h2>
    <!-- 下拉菜单：会议模式 -->
    <el-dropdown class="mode-button">
      <el-button type="primary" plain>
        {{ selectedOption }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="option in options" :key="option" @click="handleSelectOption(option)">
            {{ option }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 卡片:近期会议 -->
    <el-space wrap class="recent-meeting" style="width: 150vh; overflow-x: auto; padding-bottom: 1vh">
      <div class="recent-meeting-content" style="display: flex; width: 100%; max-height: 18vh">
        <!-- 当没有会议数据时显示占位 -->
        <el-empty v-if="filteredMeetings.length === 0" description="暂无近期会议" :image-size="100" style="width: 150vh" />
        <!-- 有会议数据 -->
        <el-card v-for="(meeting, index) in filteredMeetings" :key="index" class="box-card"
          style="height: 17vh; margin-right: 10px" :class="{
            'online-card': meeting.meetingType === '线上',
            'offline-card': meeting.meetingType === '线下',
          }">
          <!-- 卡片头部 -->
          <template #header>
            <div class="card-header" style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 1vh;
              ">
              <span>{{ meeting.meetingSubject }}</span>
              <span :class="{
                'status-blue': meeting.meetingStatus === '未开始',
                'status-green': meeting.meetingStatus === '进行中',
                'status-red': meeting.meetingStatus === '已结束',
              }">{{ meeting.meetingStatus }}</span>
            </div>
          </template>
          <!-- 卡片底部 -->
          <div>
            <!-- 会议内容 -->
            <div style="
                display: flex;
                justify-content: space-between;
                height: 4vh;
                align-items: center;
                width: 100%;
                box-sizing: border-box;
              ">
              <el-text class="mx-11" style="
                  flex: 1;
                  min-width: 0;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  text-align: left;
                ">{{ meeting.meetingDescription }}
              </el-text>
              <!-- 处理会议状态和redis缓存不同情况的按钮显示 -->
              <div class="status-select" style="display: flex; flex-shrink: 0; margin-left: auto">
                <el-text class="mx-11" style="
                    flex: 1;
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: left;
                  " :class="'status-yellow'">
                  {{ meeting.isCache === 1 ? "请您邀请参会者" : "" }}
                </el-text>
                <div class="line" v-if="meeting.isCache === 1" />
                <el-button v-if="meeting.meetingStatus !== '已结束' && meeting.isCache !== 1" :class="{
                  'status-blue':
                    meeting.meetingStatus === '未开始' ||
                    meeting.meetingStatus === '进行中',
                }" class="mx-11" style="display: block; text-align: left" type="primary" plain
                  @click="entryMeeting(meeting.meetingId)">
                  {{
                  meeting.meetingStatus === "未开始" ||
                  meeting.meetingStatus === "进行中"
                  ? "进入会议"
                  : ""
                  }}
                </el-button>
                <!-- 查看按钮 -->
                <el-button :key="meeting.meetingId" :class="{
                  'status-yellow': meeting.meetingStatus === '未开始' && meeting.isCache === 1,
                  'status-gray': meeting.meetingStatus === '未开始' && meeting.isCache === 0,
                  'status-gray': meeting.meetingStatus === '进行中',
                  'status-gray': meeting.meetingStatus === '已结束',
                }" class="mx-11" style="display: block; text-align: left"
                  @click="fetchMeetingDetail(meeting.meetingId)" plain>
                  {{
                  meeting.meetingStatus === "未开始" ||
                  meeting.meetingStatus === "进行中" ||
                  meeting.meetingStatus === "已结束"
                  ? "查看"
                  : ""
                  }}
                </el-button>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between; height: 5vh;">
              <!-- 会议开始时间 -->
              <div style="display: flex; align-items: center; gap: 4px">
                <el-icon>
                  <Timer />
                </el-icon>
                <el-text class="mx-11">{{ meeting.meetingStartTime }}</el-text>
              </div>
              <!-- 会议地点 -->
              <el-text class="mx-11" size="large" style="padding-bottom: 0.5vh;">{{ meeting.meetingPlace }}</el-text>
              <!-- 会议主持人 -->
              <el-text class="mx-11">{{ meeting.creatorName }}</el-text>
            </div>
          </div>
        </el-card>
      </div>
    </el-space>
    <!-- 分页：近期会议 -->
    <div style="display: abosulte; margin-top: 30vh; margin-left: 1vh">
      <el-pagination background layout="prev, pager, next" :total="filteredMeetingsTotal" :page-size="pageSize"
        :current-page="currentPage" :pager-count="11" @current-change="handlePageChange" />
    </div>
    <!-- 弹出层-会议信息查看 -->
    <el-dialog v-model="dialogMeetingDetail" title="会议详细信息" width="60%" :close-on-click-modal="false"
      class="custom-dialog" draggable>
      <!-- 会议数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>会议数据</h3>
        <el-form-item label="会议主题">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingSubject" maxlength="30" show-word-limit
            :disabled="dialogIsDisabled"></el-input>
        </el-form-item>
        <el-form-item label="会议描述">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingDescription" maxlength="50"
            show-word-limit :disabled="dialogIsDisabled"></el-input>
        </el-form-item>
        <el-form-item label="会议进入时间">
          <div class="block">
            <el-date-picker v-model="meetingEntryTime" type="datetime" placeholder="选择会议进入时间"
              format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm"
              :disabled="dialogIsDisabled" />
          </div>
        </el-form-item>
        <el-form-item label="会议时间范围">
          <div class="block">
            <el-date-picker v-model="meetingTimeRange" type="datetimerange" start-placeholder="选择会议开始时间"
              end-placeholder="选择会议结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss" :disabled="dialogIsDisabled" />
          </div>
        </el-form-item>
        <el-form-item label="会议座位限制">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingSeatLimit"
            disabled></el-input>
        </el-form-item>
        <el-form-item label="是否录屏">
          <el-select v-model="currentMeeting.meeting.isScreencap" placeholder="是" style="width: 100px"
            :disabled="dialogIsDisabled">
            <el-option v-for="item in isScreencapOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 通知数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>通知数据</h3>
        <el-form-item label="通知内容" style="">
          <el-input class="dialog-input" v-model="currentMeeting.notification.notificationContent" maxlength="100"
            show-word-limit :disabled="dialogIsDisabled"></el-input>
        </el-form-item>
        <el-form-item label="通知发送时间">
          <div class="block">
            <el-date-picker v-model="notificationSendTime" type="datetime" placeholder="选择通知发送时间"
              format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm"
              :disabled="dialogIsDisabled" />
          </div>
        </el-form-item>
      </el-form>
      <!-- 参会数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>参会数据</h3>
        <el-form-item label="用户数据" style="margin-left: 3.5vh">
          <el-table :data="currentMeeting.participant" style="width: 100%; " :cell-class-name="tableCell">
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="昵称" prop="nickname" />
            <el-table-column align="center">
              <template #header>
                <el-select ref="userSelect" multiple filterable remote reserve-keyword placeholder="请输入用户名搜索用户"
                  remote-show-suffix :remote-method="userInfoSearch" :loading="userInfoLoading"
                  @change="addParticipants" style="max-width: 25vh" :disabled="dialogIsDisabled">
                  <el-option v-for="item in userInfo" :key="item.username" :label="item.username"
                    :value="item.username" />
                </el-select>
              </template>
              <template #default="scope">
                <el-button size="small" type="danger" @click="deleteParticipate(scope.$index, scope.row)"
                  :disabled="dialogIsDisabled">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 提交修改 -->
      <el-button type="success" plain style="width: 80vh;" :disabled="dialogIsDisabled" @click="updateMeeting">
        提交修改
      </el-button>
    </el-dialog>

    <!-- 标题：会议室预约 -->
    <h2 class="mx-2" type="info" size="large">会议室预约</h2>
    <!-- 卡片：创建线上会议 -->
    <el-space wrap class="create-online-meeting">
      <el-card class="box-card" style="width: 30vh; height: 18vh">
        <!-- 卡片头部 -->
        <template #header>
          <div class="card-header" style="
              display: block;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              line-height: 1vh;
            ">
            <span>创建会议</span>
          </div>
        </template>
        <!-- 卡片底部 -->
        <div>
          <!-- 介绍信息 -->
          <el-text class="mx-11" style="display: block; text-align: left; margin-bottom: 2vh">线上会议</el-text>
          <div style="display: flex; justify-content: center">
            <!-- 按钮 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <el-button type="primary" plain style="width: 26vh" @click="buttonCreateMeeting">去创建会议</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <!-- 弹出层-创建会议 -->
    <el-dialog v-model="dialogCreateMeeting" title="创建会议" width="60%" :close-on-click-modal="false"
      class="custom-dialog" draggable>
      <!-- 会议数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>会议数据</h3>
        <el-form-item label="会议主题">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingSubject" maxlength="30"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="会议描述">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingDescription" maxlength="50"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="会议进入时间">
          <div class="block">
            <el-date-picker v-model="meetingEntryTime" type="datetime" placeholder="选择会议进入时间"
              format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
          </div>
        </el-form-item>
        <el-form-item label="会议时间范围">
          <div class="block">
            <el-date-picker v-model="meetingTimeRange" type="datetimerange" start-placeholder="选择会议开始时间"
              end-placeholder="选择会议结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss" />
          </div>
        </el-form-item>
        <el-form-item label="会议座位限制">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingSeatLimit"></el-input>
        </el-form-item>
        <el-form-item label="是否录屏">
          <el-select v-model="currentMeeting.meeting.isScreencap" placeholder="是" style="width: 100px">
            <el-option v-for="item in isScreencapOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 通知数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>通知数据</h3>
        <el-form-item label="通知内容" style="">
          <el-input class="dialog-input" v-model="currentMeeting.notification.notificationContent" maxlength="100"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="通知发送时间">
          <div class="block">
            <el-date-picker v-model="notificationSendTime" type="datetime" placeholder="选择通知发送时间"
              format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
          </div>
        </el-form-item>
      </el-form>
      <!-- 参会数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>参会数据</h3>
        <el-form-item label="用户数据" style="margin-left: 3.5vh" >
          <el-table :data="currentMeeting.participant" style="width: 100%" :cell-class-name="tableCell">
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="昵称" prop="nickname" />
            <el-table-column align="center">
              <template #header>
                <el-select ref="userSelect" multiple filterable remote reserve-keyword placeholder="请输入用户名搜索用户"
                  remote-show-suffix :remote-method="userInfoSearch" :loading="userInfoLoading"
                  @change="addParticipants" style="max-width: 25vh">
                  <el-option v-for="item in userInfo" :key="item.username" :label="item.username"
                    :value="item.username" />
                </el-select>
              </template>
              <template #default="scope">
                <el-button size="small" type="danger" @click="deleteParticipate(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 提交创建 -->
      <el-button type="success" plain style="width: 80vh;" @click="createMeeting">
        提交创建
      </el-button>
    </el-dialog>


    <!-- 卡片：线下会议室申请 -->
    <el-space wrap class="create-offline-meeting">
      <el-card class="box-card" style="width: 30vh; height: 18vh">
        <!-- 卡片头部 -->
        <template #header>
          <div class="card-header" style="
              display: block;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              line-height: 1vh;
            ">
            <span>申请会议室</span>
          </div>
        </template>
        <!-- 卡片底部 -->
        <div>
          <!-- 介绍信息 -->
          <el-text class="mx-11" style="display: block; text-align: left; margin-bottom: 2vh">线下会议</el-text>
          <div style="display: flex; justify-content: center">
            <!-- 按钮 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <el-button type="primary" plain style="width: 26vh" @click="buttonOfflineCreateMeeting">去申请会议室</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <!-- 弹出层-线下会议申请 -->
    <el-dialog v-model="dialogOfflineCreateMeeting" title="线下会议室申请" width="60%" :close-on-click-modal="false"
      class="custom-dialog" draggable>
      <!-- 会议数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>会议数据</h3>
        <el-form-item label="会议主题">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingSubject" maxlength="30"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="会议描述">
          <el-input class="dialog-input" v-model="currentMeeting.meeting.meetingDescription" maxlength="50"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="会议进入时间">
          <div class="block">
            <el-date-picker v-model="meetingEntryTime" type="datetime" placeholder="选择会议进入时间"
              format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
          </div>
        </el-form-item>
        <el-form-item label="是否录屏">
          <el-select v-model="currentMeeting.meeting.isScreencap" placeholder="是" style="width: 100px">
            <el-option v-for="item in isScreencapOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 通知数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>通知数据</h3>
        <el-form-item label="通知内容" style="">
          <el-input class="dialog-input" v-model="currentMeeting.notification.notificationContent" maxlength="100"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="通知发送时间">
          <div class="block">
            <el-date-picker v-model="notificationSendTime" type="datetime" placeholder="选择通知发送时间"
              format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
          </div>
        </el-form-item>
      </el-form>
      <!-- 参会数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>参会数据</h3>
        <el-form-item label="用户数据" style="margin-left: 3.5vh">
          <el-table :data="currentMeeting.participant" style="width: 100%">
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="昵称" prop="nickname" />
            <el-table-column align="center">
              <template #header>
                <el-select ref="userSelect" multiple filterable remote reserve-keyword placeholder="请输入用户名搜索用户"
                  remote-show-suffix :remote-method="userInfoSearch" :loading="userInfoLoading"
                  @change="addParticipants" style="max-width: 25vh">
                  <el-option v-for="item in userInfo" :key="item.username" :label="item.username"
                    :value="item.nickname" />
                </el-select>
              </template>
              <template #default="scope">
                <el-button size="small" type="danger" @click="deleteParticipate(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 会议室数据 -->
      <el-form style="text-align: left" label-width="auto">
        <h3>会议室数据</h3>
        <!-- <el-form-item label="会议室ID" style="">
          <el-input class="dialog-input" v-model="currentMeeting.room.roomId" maxlength="100"
            show-word-limit disabled></el-input>
        </el-form-item>
        <el-form-item label="会议地点" style="">
          <el-input class="dialog-input" v-model="currentMeeting.room.meetingPlace" maxlength="100"
            show-word-limit></el-input>
        </el-form-item> -->
        <el-form-item label="会议地点/会议室号" style="">
          <el-cascader placeholder="选择会议室" :options="currentMeeting.place_id" filterable />
        </el-form-item>
        <!-- <el-form-item label="会议室号" style="">
          <el-input class="dialog-input" v-model="currentMeeting.room.meetingNum" maxlength="100"
            show-word-limit></el-input>
        </el-form-item> -->
        <el-form-item label="会议时间范围">
          <div class="block">
            <el-date-picker v-model="meetingTimeRange" type="datetimerange" start-placeholder="选择会议开始时间"
              end-placeholder="选择会议结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss" />
          </div>
        </el-form-item>
        <el-form-item label="会议座位限制">
          <el-input class="dialog-input" v-model="currentMeeting.room.meetingSeatLimit"></el-input>
        </el-form-item>

      </el-form>
      <!-- 提交审批 -->
      <el-button type="success" plain style="width: 80vh;" @click="offlineCreateMeeting">
        提交审批
      </el-button>
    </el-dialog>

    <!-- 卡片：会议室审批 -->
    <el-space wrap class="select-offline-meeting">
      <el-card class="box-card" style="width: 30vh; height: 18vh">
        <!-- 卡片头部 -->
        <template #header>
          <div class="card-header" style="
              display: block;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              line-height: 1vh;
            ">
            <span>会议室审批</span>
          </div>
        </template>
        <!-- 卡片底部 -->
        <div>
          <!-- 介绍信息 -->
          <el-text class="mx-11" style="display: block; text-align: left; margin-bottom: 2vh">查询审批进度</el-text>
          <div style="display: flex; justify-content: center">
            <!-- 按钮 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <el-button type="primary" plain style="width: 26vh" @click="buttonOfflineSelectSchedule">去查询进度</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <!-- 弹出层-查询审批进度 -->
    <el-dialog v-model="dialogOfflineSelectSchedule" title="查询审批进度" width="60%" :close-on-click-modal="false"
      class="custom-dialog" draggable style="overflow: auto;">
      <!-- 会议室数据 -->
      <el-form style="text-align: left; max-height: 400px;" label-width="auto">
        <el-form-item style="margin-left: 3.5vh;">
          <el-table :data="[currentMeeting.application]" style="width: 100%;">
            <el-table-column label="会议室申请ID" prop="applicationId" width="150" align="center" />
            <el-table-column label="会议地点" prop="meetingPlace" width="150" align="center" />
            <el-table-column label="会议室号" prop="meetingNum" width="150" align="center" />
            <el-table-column label="会议时间范围" prop="meetingRange" width="500" align="center">
              <div class="block">
                <el-date-picker v-model="meetingTimeRange" type="datetimerange" start-placeholder="选择会议开始时间"
                  end-placeholder="选择会议结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                  time-format="A hh:mm:ss" />
              </div>
            </el-table-column>
            <el-table-column label="审批状态" prop="applicationStatus" width="150" align="center"></el-table-column>
            <el-table-column label="会议进入时间" width="300" align="center">
              <div class="block">
                <el-date-picker v-model="approvalTime" type="datetime" placeholder="选择会议进入时间"
                  format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
              </div>
            </el-table-column>
            <el-table-column label="审批人" prop="approvalName" width="150" align="center"></el-table-column>
            <el-table-column label="驳回理由" prop="rejectReason" width="300" align="center"></el-table-column>
          </el-table>
        </el-form-item>
        <!-- 分页：审批进度(待修改) -->
        <el-pagination background layout="prev, pager, next" :total="filteredApplicationTotal" :page-size="applicationPageSize"
          :current-page="applicationCurrentPage" :pager-count="11" @current-change="applicationPageChange" />
      </el-form>
    </el-dialog>



    <!-- 标题：纪要管理 -->
    <h2 class="mx-3" type="info" size="large">纪要管理</h2>
    <!-- 卡片：纪要管理 -->
    <el-space wrap class="minutes-manage">
      <el-card class="box-card" style="width: 30vh; height: 18vh">
        <!-- 卡片头部 -->
        <template #header>
          <div class="card-header" style="
              display: block;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              line-height: 1vh;
            ">
            <span>纪要生成</span>
          </div>
        </template>
        <!-- 卡片底部 -->
        <div>
          <!-- 介绍信息 -->
          <el-text class="mx-11" style="display: block; text-align: left; margin-bottom: 2vh">通过音频生成会议纪要</el-text>
          <div style="display: flex; justify-content: center">
            <!-- 按钮 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <el-button type="primary" plain style="width: 26vh" @click="buttonAssistance">去生成纪要</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <!-- 弹出层-会议纪要生成 -->
    <el-dialog v-model="dialogAssistance" title="会议纪要生成" width="60%" :close-on-click-modal="false" class="custom-dialog"
      draggable style="overflow: auto;">
      <el-select v-model="valueAssistance" placeholder="选择会议" style="width: 240px">
      <el-option
        v-for="item in meetingDatas"
        :key="item.meetingId"
        :label="item.meetingSubject"
        :value="item.meetingId"
      >
        <span style="float: left">{{ item.meetingSubject }}</span>
        <span
          style="
            float: right;
            color: var(--el-text-color-secondary);
            font-size: 13px;
          "
        >
          {{ item.meetingDescription }}
        </span>
      </el-option>
    </el-select>
    <!-- 调用后端生成纪要接口 -->
    <el-button type="success" plain @click="createTask">点击生成纪要和摘要</el-button>
    </el-dialog>

    
    <!-- 卡片：纪要信息-->
    <el-space wrap class="minutes-manage-info">
      <el-card class="box-card" style="width: 30vh; height: 18vh">
        <!-- 卡片头部 -->
        <template #header>
          <div class="card-header" style="
              display: block;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              line-height: 1vh;
            ">
            <span>纪要生成进度</span>
          </div>
        </template>
        <!-- 卡片底部 -->
        <div>
          <!-- 介绍信息 -->
          <el-text class="mx-11" style="display: block; text-align: left; margin-bottom: 2vh">查看会议纪要生成速度</el-text>
          <div style="display: flex; justify-content: center">
            <!-- 按钮 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <el-button type="primary" plain style="width: 26vh">去查看纪要</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <!-- 卡片：报道稿件生成-->
    <el-space wrap class="manuscript-info">
      <el-card class="box-card" style="width: 30vh; height: 18vh">
        <!-- 卡片头部 -->
        <template #header>
          <div class="card-header" style="
              display: block;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              line-height: 1vh;
            ">
            <span>报道稿件生成</span>
          </div>
        </template>
        <!-- 卡片底部 -->
        <div>
          <!-- 介绍信息 -->
          <el-text class="mx-11" style="display: block; text-align: left; margin-bottom: 2vh">通过纪要生成报道稿件（参考）</el-text>
          <div style="display: flex; justify-content: center">
            <!-- 按钮 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <el-button type="primary" plain style="width: 26vh">去查看报道稿件</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <!-- 卡片：稿件生成进度-->
    <el-space wrap class="manuscript">
      <el-card class="box-card" style="width: 30vh; height: 18vh">
        <!-- 卡片头部 -->
        <template #header>
          <div class="card-header" style="
              display: block;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              line-height: 1vh;
            ">
            <span>稿件生成进度</span>
          </div>
        </template>
        <!-- 卡片底部 -->
        <div>
          <!-- 介绍信息 -->
          <el-text class="mx-11" style="display: block; text-align: left; margin-bottom: 2vh">查看稿件生成进度（参考）</el-text>
          <div style="display: flex; justify-content: center">
            <!-- 按钮 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <el-button type="primary" plain style="width: 26vh">去生成报道稿件</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import moment from "moment";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from 'axios'

export default {
  name: "dashboard",
  components: { ArrowDown },
  setup() {
    // 页面加载刷新数据
    onMounted(() => {
      console.log("刷新数据成功");
      
      init();
    })
    const tableCell = ({row, column, rowIndex, columnIndex,}) => {
      // console.log("columnIndex", columnIndex);
      
      if (columnIndex === 0) {
        return 'warning-cell'
      } else if (columnIndex === 1) {
        return 'success-cell'
      }
      return ''
    };
    // 获取路由实例
    const router = useRouter();
    // 获取userId
    const userId = localStorage.getItem("userId");
    // 全部会议简要信息
    // const meetings = ref([
    //   {
    //     meetingId: 366370352715145676,
    //     meetingType: "线上",
    //     meetingNum: "ecm-153108703",
    //     meetingSubject: "你好",
    //     meetingDescription: "你好",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-05-10T08:00:00.000+08:00",
    //     meetingStartTime: "2025-05-10T08:20:00.000+08:00",
    //     meetingEndTime: "2025-05-10T08:30:00.000+08:00",
    //     meetingStatus: 0,
    //     meetingLink: null,
    //     isCache: 1,
    //     creatorName: "2",
    //   },
    //   {
    //     meetingId: "23593976317096211",
    //     meetingType: "线上",
    //     meetingNum: "ecm-991216667",
    //     meetingSubject: "培训",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-15T14:55:00.000+08:00",
    //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
    //     meetingStatus: 0,
    //     meetingLink: "23593976317096211",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "84874928986917039",
    //     meetingType: "线上",
    //     meetingNum: "ecm-625810564",
    //     meetingSubject: "培训",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-11T14:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 1,
    //     meetingLink: "84874928986917039",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 0,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训1",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训2",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训3",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线上",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训4",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线下",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训5",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //     meetingPlace: "科技楼1001",
    //   },
    //   {
    //     meetingId: "544654079935345089",
    //     meetingType: "线下",
    //     meetingNum: "ecm-630901536",
    //     meetingSubject: "培训6",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-08T18:55:00.000+08:00",
    //     meetingStartTime: "2025-04-11T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-11T20:55:00.000+08:00",
    //     meetingStatus: 2,
    //     meetingLink: "793779881341664478",
    //     isCache: 0,
    //     creatorName: "20210862224",
    //     meetingPlace: "科技楼1001",
    //   },
    // ]);
    const meetings = ref([]);
    // 会议模式
    const options = ref(["线上", "线下"]);
    // 选择会议模式
    const selectedOption = ref("线上");
    // 分页当前页
    const currentPage = ref(1);
    // 页码
    const pageSize = ref(3);
    // 处理选择会议模式
    const handleSelectOption = (option) => {
      selectedOption.value = option;
      currentPage.value = 1;
    };
    // 处理分页变化
    const handlePageChange = (page) => {
      currentPage.value = page;
    };
    // 初始化
    const init = async() => {
      try {
       const response = await axios.get('/meeting/meeting/online/queryAll/' + userId)
        .then((response) => {
          const data = response.data;
          if (data.code === 200) {
            meetings.value = data.data.meeting;
            // console.log(meetings.value);
          }
        })
      } catch (error) {
        console.log(error);
      }
    };
    // 处理会议数据过滤，包含时间、缓存
    const filteredMeetings = computed(() => {
      const filtered = meetings.value
        .filter((meeting) => meeting.meetingType === selectedOption.value)
        .map((meeting) => ({
          ...meeting,
          meetingStartTime: moment(meeting.meetingStartTime).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          meetingEndTime: moment(meeting.meetingEndTime).format("YYYY-MM-DD HH:mm:ss"),
          meetingEntryTime: moment(meeting.meetingEntryTime).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          meetingStatus:
            meeting.meetingStatus === 0
              ? "未开始"
              : meeting.meetingStatus === 1
                ? "进行中"
                : "已结束",
        }));

        
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filtered.slice(start, end);
    });
    // 处理模式不同的会议总数
    const filteredMeetingsTotal = computed(() => {
      return meetings.value.filter(
        (meeting) => meeting.meetingType === selectedOption.value
      ).length;
    });
    // 弹窗状态-会议详细信息
    const dialogMeetingDetail = ref(false);
    // 当前选中的会议
    // const currentMeeting = ref({
    //   meetingId: null,
    //   meetingType: null,
    //   meeting: {
    //     meetingNum: "ecm-991216667",
    //     meetingSubject: "培训",
    //     meetingDescription: "培训",
    //     meetingCreatorId: 797884113,
    //     meetingEntryTime: "2025-04-15T14:55:00.000+08:00",
    //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
    //     meetingStatus: 0,
    //     createTime: null,
    //     meetingSeatLimit: 100,
    //     meetingSceneType: "无",
    //     sponsorSigninStatus: 0,
    //     sponsorSigninTime: null,
    //     compereId: 797884113,
    //     isScreencap: 0,
    //     meetingLink: "23593976317096211",
    //   },
    //   notification: {
    //     notificationId: 351930797318,
    //     notificationContent: "Java培训",
    //     senderId: 797884113,
    //     sendTime: "2025-04-11T19:11:00.000+08:00",
    //     sendStatus: 0,
    //   },
    //   participant: [
    //     {
    //       userId: 432478646,
    //       username: "1",
    //       nickname: "2",
    //       joinTime: null,
    //     },
    //     {
    //       userId: 436170907,
    //       username: "3",
    //       nickname: "4",
    //       joinTime: null,
    //     },
    //     {
    //       userId: 313604140,
    //       username: "5",
    //       nickname: "6",
    //       joinTime: null,
    //     },
    //     {
    //       userId: 427388197,
    //       username: "7",
    //       nickname: "8",
    //       joinTime: null,
    //     },
    //   ],
    //   room: {
    //     roomId: "1",
    //     meetingPlace: "科技楼1001",
    //     meetingNum: "ecm-991216667",
    //     meetingSeatLimit: 100,
    //     meetingEntryTime: "2025-04-15T14:55:00.000+08:00",
    //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
    //   },
    //   place_id: [
    //     {
    //       value: '科技楼',
    //       label: '科技楼',
    //       children: [
    //         {
    //           value: '1001',
    //           label: '1001'
    //         },
    //         {
    //           value: '1002',
    //           label: '1002'
    //         },
    //       ],
    //     },
    //     {
    //       value: '博学楼',
    //       label: '博学楼',
    //       children: [
    //         {
    //           value: '501',
    //           label: '501'
    //         },
    //         {
    //           value: '506',
    //           label: '506'
    //         },
    //       ],
    //     },
    //   ],
    //   application: {
    //     applicationId: "1",
    //     meetingPlace: "",
    //     meetingNum: "",
    //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
    //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
    //     applicationStatus: "0",
    //     approvalTime: "2025-04-15T14:55:00.000+08:00",
    //     approvalName: "张三",
    //     rejectReason: "驳回"
    //   },
    //   isCache: 0,
    // });
    const currentMeeting = ref({});
    // 会议时间范围
    const meetingTimeRange = ref([]);
    // 会议进入时间
    const meetingEntryTime = ref();
    const isScreencapOptions = ref([
      {
        value: 1,
        label: "是",
      },
      {
        value: 0,
        label: "否",
      },
    ]);
    // 通知发送时间
    const notificationSendTime = ref();
    // 后端-请求会议详细信息
    const fetchMeetingDetail = async (meetingId) => {
      try {
        // currentMeeting.value = meetings.value.find(
        //   (meeting) => meeting.meetingId === meetingId
        // );
        currentMeeting.value.meetingId = meetingId;
        const response = await axios
          .get("/meeting/meeting/online/query/" + meetingId)
          .then((response) => {
            const data = response.data;
            if(data.code === 200) {
              currentMeeting.value = data.data;
              currentMeeting.value.meetingId = meetingId;
              
            }
          })
          .catch((error) => {
            console.log(error);
          });
        meetingTimeRange.value = [
          new Date(currentMeeting.value.meeting.meetingStartTime),
          new Date(currentMeeting.value.meeting.meetingEndTime),
        ];
        meetingEntryTime.value = new Date(
          currentMeeting.value.meeting.meetingEntryTime
        );
        notificationSendTime.value = new Date(
          currentMeeting.value.notification.sendTime
        );
        dialogMeetingDetail.value = true;
      } catch (error) {
      } finally {
      }
    };
    // 使用currentMeeting删除对象，统一由下一步“更新”来提交后端
    const deleteParticipate = async (index, row) => {
      currentMeeting.value.participant.splice(index, 1);
    };
    // 用户信息
    // const userInfo = ref([
    //   {
    //     userId: 427388197,
    //     username: "7",
    //     nickname: "8",
    //   },
    //   {
    //     userId: 427388198,
    //     username: "11",
    //     nickname: "22",
    //   },
    // ]);
    const userInfo = ref([]);
    // 加载-用户信息
    const userInfoLoading = ref(false);
    // 查询用户信息
    const userInfoSearch = async (keyword) => {
      userInfoLoading.value = true;
      try {
        const response = await axios
        .post("/user/user/query", {})
        .then((response) => {
          const data = response.data;
          if(data.code === 200) {
            userInfo.value = data.data.filter((user) => user.username.includes(keyword));
            // console.log(userInfo.value);
          }
        })
        .catch((error) => {
          console.log(error);
        });
      } catch (error) {
      } finally {
        userInfoLoading.value = false;
      }
    };
    // 选择器搜索绑定ref事件
    const userSelect = ref(null);
    // 添加参会者进入currentMeeting对象，统一由下一步“更新”来提交后端
    const addParticipants = async (selectedValues) => {
      console.log(selectedValues);
      
      selectedValues.forEach((value) => {
        const user = userInfo.value.find((user) => user.username === value);
        
        if (user) {
          const newParticipant = {
            userId: user.id,
            username: user.username,
            nickname: user.nickname,
            joinTime: null,
          };
          // 检查是否存在相同的参与者对象
          const isDuplicate = currentMeeting.value.participant.some(
            (participant) =>
              participant.userId === newParticipant.userId &&
              participant.username === newParticipant.username &&
              participant.nickname === newParticipant.nickname
          );
          // 检查是否超过座位限制
          const isWithinLimit =
            currentMeeting.value.participant.length <=
            currentMeeting.value.meeting.meetingSeatLimit;
          if (!isDuplicate && isWithinLimit) {
            currentMeeting.value.participant.push(newParticipant);
            console.log(currentMeeting.value.participant);
            
          } else if (!isWithinLimit) {
            ElMessage.error("已达到会议的最大座位限制，无法添加更多参会者");
          } else if (isDuplicate) {
            ElMessage.warning("该参会者已被您加入会议");
          }
        }
      });
      // 关闭选择器
      userSelect.value.blur();
    };
    // 是否禁用弹出层里面内容
    const dialogIsDisabled = computed(() => {
      // 数据类型不一致供调试
      // return userId !== currentMeeting.value.meeting.meetingCreatorId && currentTime.isBefore(meetingEntryTime);
      return (
        Number(userId) !== currentMeeting.value.meeting.meetingCreatorId ||
        currentMeeting.value.meeting.meetingStatus !== 0
      );
    });
    // 弹窗关闭后恢复默认数据-会议详细信息
    watch(dialogMeetingDetail, (newValue) => {
      if (!newValue) {
        // 重置 currentMeeting 到初始状态
        // currentMeeting.value = {
        //   meetingId: null,
        //   meetingType: null,
        //   meeting: {
        //     meetingNum: "ecm-991216667",
        //     meetingSubject: "培训",
        //     meetingDescription: "培训",
        //     meetingCreatorId: 797884113,
        //     meetingEntryTime: "2025-04-15T14:55:00.000+08:00",
        //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
        //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
        //     meetingStatus: 0,
        //     createTime: null,
        //     meetingSeatLimit: 100,
        //     meetingSceneType: "无",
        //     sponsorSigninStatus: 0,
        //     sponsorSigninTime: null,
        //     compereId: 797884113,
        //     isScreencap: 0,
        //     meetingLink: "23593976317096211",
        //   },
        //   notification: {
        //     notificationId: 351930797318,
        //     notificationContent: "Java培训",
        //     senderId: 797884113,
        //     sendTime: "2025-04-11T19:11:00.000+08:00",
        //     sendStatus: 0,
        //   },
        //   participant: [
        //     {
        //       userId: 432478646,
        //       username: "1",
        //       nickname: "2",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 436170907,
        //       username: "3",
        //       nickname: "4",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 313604140,
        //       username: "5",
        //       nickname: "6",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 427388197,
        //       username: "7",
        //       nickname: "8",
        //       joinTime: null,
        //     },
        //   ],
        //   isCache: 0,
        // };
        // 清空会议时间范围和会议进入时间
        meetingTimeRange.value = [];
        meetingEntryTime.value = null;
      }
    });
    // 更新会议，并退出弹窗
    const updateMeeting = async () => {
      dialogMeetingDetail.value = false;
      // console.log(currentMeeting.value);
      const meetingId = currentMeeting.value.meetingId;
            // console.log(userInfo.value);
      const participant = currentMeeting.value.participant;
      // userInfo.value = currentMeeting.value.participant;
      
      
      try {
        const response = await axios
        .put("/meeting/meeting/online/update/" + meetingId + "/" + currentMeeting.value.notification.notificationId, {
          subject: currentMeeting.value.meeting.meetingSubject,
          description: currentMeeting.value.meeting.meetingDescription,
          creatorId: currentMeeting.value.meeting.meetingCreatorId,
          entryTime: meetingEntryTime.value,
          startTime: meetingTimeRange.value[0],
          endTime: meetingTimeRange.value[1],
          seatLimit: currentMeeting.value.meeting.meetingSeatLimit,
          sceneType: currentMeeting.value.meeting.meetingSceneType,
          isScreencap: currentMeeting.value.meeting.isScreencap,
          notificationContent: currentMeeting.value.notification.notificationContent,
          sendTime: notificationSendTime.value,
        })
        .then((response) => {
          const data = response.data;
          if (data.code === 200) {
            currentMeeting.value.meetingId = meetingId;
            // console.log(userInfo.value);
            // console.log(currentMeeting.value.participant);
            
            currentMeeting.value.participant = participant;
            // 先提交修改，后修改参会者
            createMeetingInvite();
            // ElMessage.success("修改会议成功");
          } else {
            ElMessage.error(data.msg);
          }
        });
      } catch (error) {
        
      }
    };
    // 按钮-去创建会议
    const buttonCreateMeeting = async () => {
      dialogCreateMeeting.value = true;
      // meetingTimeRange.value = [
      //   new Date(currentMeeting.value.meeting.meetingStartTime),
      //   new Date(currentMeeting.value.meeting.meetingEndTime),
      // ];
      // meetingEntryTime.value = new Date(
      //   currentMeeting.value.meeting.meetingEntryTime
      // );
      // notificationSendTime.value = new Date(
      //   currentMeeting.value.notification.sendTime
      // );
      currentMeeting.value = {
        meetingId: null,
        meetingType: null,
        meeting: {
          meetingNum: "",
          meetingSubject: "",
          meetingDescription: "",
          meetingCreatorId: userId,
          meetingEntryTime: "",
          meetingStartTime: "",
          meetingEndTime: "",
          meetingStatus: 0,
          createTime: null,
          meetingSeatLimit: 100,
          meetingSceneType: "无",
          sponsorSigninStatus: 0,
          sponsorSigninTime: null,
          compereId: userId,
          isScreencap: 0,
          meetingLink: "",
        },
        notification: {
          notificationId: null,
          notificationContent: "",
          senderId: userId,
          sendTime: "",
          sendStatus: 0,
        },
        participant: [],
        room: {
          roomId: "",
          meetingPlace: "",
          meetingNum: "",
          meetingSeatLimit: 100,
          meetingEntryTime: "",
          meetingStartTime: "",
          meetingEndTime: "",
        },
        place_id: [
          {
            value: '科技楼',
            label: '科技楼',
            children: [
              {
                value: '1001',
                label: '1001'
              },
              {
                value: '1002',
                label: '1002'
              },
            ],
          },
          {
            value: '博学楼',
            label: '博学楼',
            children: [
              {
                value: '501',
                label: '501'
              },
              {
                value: '506',
                label: '506'
              },
            ],
          },
        ],
        isCache: 0,
      };
      meetingTimeRange.value = ''
      meetingEntryTime.value = '';
      notificationSendTime.value = '';
    };
    // 弹窗-去创建会议
    const dialogCreateMeeting = ref(false);
    // 创建会议（会议、通知）
    const createMeeting = async () => {
      dialogCreateMeeting.value = false;
      const participant = currentMeeting.value.participant
      try {
        const response = await axios
        .post("/meeting/meeting/online/create", {
          subject: currentMeeting.value.meeting.meetingSubject,
          description: currentMeeting.value.meeting.meetingDescription,
          creatorId: userId,
          entryTime: meetingEntryTime.value,
          startTime: meetingTimeRange.value[0],
          endTime: meetingTimeRange.value[1],
          seatLimit: currentMeeting.value.meeting.meetingSeatLimit,
          sceneType: '无',
          isScreencap: currentMeeting.value.meeting.isScreencap,
          notificationContent: currentMeeting.value.notification.notificationContent,
          sendTime: notificationSendTime.value,
        })
        .then((response) => {
          console.log(response);
          const data = response.data;
          if (data.code === 200) {
            currentMeeting.value.meetingId = data.data.meetingId;
            currentMeeting.value.participant = participant;
            // 先创建会议后邀请
            createMeetingInvite();
            // ElMessage.success("创建会议成功");
          } else {
            ElMessage.error(data.msg);
          }
        });
        
      } catch (error) {
        console.log(error);
        ElMessage.error("创建会议失败");
      }

      
    };
    // 创建会议（邀请参会者）
    const createMeetingInvite = async () => {
      const userArray = currentMeeting.value.participant.map(user => user.userId);
      console.log(userArray);
      
      try {
        const response = await axios
        .post("/meeting/meetingParticipant/online/invite", {
          meetingId: currentMeeting.value.meetingId,
          creatorId: userId,
          userId: userArray
        })
        .then((response) => {
          const data = response.data;
          if (data.code === 200) {
            ElMessage.success("成功");
          } else {
            console.log(data);
            ElMessage.error(data.msg);
          }
        })
      } catch (error) {
        console.log(error);
        
      } finally {
        // 刷新
        init();
      }
    };
    // 弹窗关闭后恢复默认数据-创建会议
    watch(dialogCreateMeeting, (newValue) => {
      if (!newValue) {
        // 重置 currentMeeting 到初始状态
        // currentMeeting.value = {
        //   meetingId: null,
        //   meetingType: null,
        //   meeting: {
        //     meetingNum: "ecm-991216667",
        //     meetingSubject: "培训",
        //     meetingDescription: "培训",
        //     meetingCreatorId: 797884113,
        //     meetingEntryTime: "2025-04-15T14:55:00.000+08:00",
        //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
        //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
        //     meetingStatus: 0,
        //     createTime: null,
        //     meetingSeatLimit: 100,
        //     meetingSceneType: "无",
        //     sponsorSigninStatus: 0,
        //     sponsorSigninTime: null,
        //     compereId: 797884113,
        //     isScreencap: 0,
        //     meetingLink: "23593976317096211",
        //   },
        //   notification: {
        //     notificationId: 351930797318,
        //     notificationContent: "Java培训",
        //     senderId: 797884113,
        //     sendTime: "2025-04-11T19:11:00.000+08:00",
        //     sendStatus: 0,
        //   },
        //   participant: [
        //     {
        //       userId: 432478646,
        //       username: "1",
        //       nickname: "2",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 436170907,
        //       username: "3",
        //       nickname: "4",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 313604140,
        //       username: "5",
        //       nickname: "6",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 427388197,
        //       username: "7",
        //       nickname: "8",
        //       joinTime: null,
        //     },
        //   ],
        //   isCache: 0,
        // };
        // 清空会议时间范围和会议进入时间
        meetingTimeRange.value = [];
        meetingEntryTime.value = null;
      }
    });
    // 按钮-去创建线下会议
    const buttonOfflineCreateMeeting = async () => {
      dialogOfflineCreateMeeting.value = true;
      meetingTimeRange.value = [
        new Date(currentMeeting.value.room.meetingStartTime),
        new Date(currentMeeting.value.room.meetingEndTime),
      ];
      meetingEntryTime.value = new Date(
        currentMeeting.value.room.meetingEntryTime
      );
    };
    // 弹窗-去创建线下会议
    const dialogOfflineCreateMeeting = ref(false);
    // 创建线下会议（会议室、会议、通知）
    const offlineCreateMeeting = async () => {
      dialogOfflineCreateMeeting.value = false;
      // 会议室审批通过后，先创建会议后邀请
      createMeetingInvite();
    };
    // 弹窗关闭后恢复默认数据-线下会议室申请
    watch(dialogOfflineCreateMeeting, (newValue) => {
      if (!newValue) {
        // 重置 currentMeeting 到初始状态
        // currentMeeting.value = {
        //   meetingId: null,
        //   meetingType: null,
        //   meeting: {
        //     meetingNum: "ecm-991216667",
        //     meetingSubject: "培训",
        //     meetingDescription: "培训",
        //     meetingCreatorId: 797884113,
        //     meetingEntryTime: "2025-04-15T14:55:00.000+08:00",
        //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
        //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
        //     meetingStatus: 0,
        //     createTime: null,
        //     meetingSeatLimit: 100,
        //     meetingSceneType: "无",
        //     sponsorSigninStatus: 0,
        //     sponsorSigninTime: null,
        //     compereId: 797884113,
        //     isScreencap: 0,
        //     meetingLink: "23593976317096211",
        //   },
        //   notification: {
        //     notificationId: 351930797318,
        //     notificationContent: "Java培训",
        //     senderId: 797884113,
        //     sendTime: "2025-04-11T19:11:00.000+08:00",
        //     sendStatus: 0,
        //   },
        //   participant: [
        //     {
        //       userId: 432478646,
        //       username: "1",
        //       nickname: "2",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 436170907,
        //       username: "3",
        //       nickname: "4",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 313604140,
        //       username: "5",
        //       nickname: "6",
        //       joinTime: null,
        //     },
        //     {
        //       userId: 427388197,
        //       username: "7",
        //       nickname: "8",
        //       joinTime: null,
        //     },
        //   ],
        //   room: {
        //     roomId: "1",
        //     meetingPlace: "科技楼1001",
        //     meetingNum: "ecm-991216667",
        //     meetingSeatLimit: 100,
        //     meetingEntryTime: "2025-04-15T14:55:00.000+08:00",
        //     meetingStartTime: "2025-04-15T19:55:00.000+08:00",
        //     meetingEndTime: "2025-04-15T20:55:00.000+08:00",
        //   },
        //   place_id: [
        //     {
        //       value: '科技楼',
        //       label: '科技楼',
        //       children: [
        //         {
        //           value: '1001',
        //           label: '1001'
        //         },
        //         {
        //           value: '1002',
        //           label: '1002'
        //         },
        //       ],
        //     },
        //     {
        //       value: '博学楼',
        //       label: '博学楼',
        //       children: [
        //         {
        //           value: '501',
        //           label: '501'
        //         },
        //         {
        //           value: '506',
        //           label: '506'
        //         },
        //       ],
        //     },
        //   ],
        //   isCache: 0,
        // };
        // 清空会议时间范围和会议进入时间
        meetingTimeRange.value = [];
        meetingEntryTime.value = null;
      }
    });
    // 点击-进入会议
    const entryMeeting = async (meetingId) => {
      router.push({
        path: '/zego',
        query: { linkId: meetingId, userId: userId }
      })
    };
    // 会议室数据
    const roomOptions = ref([
      {
        value: '科技楼',
        label: '科技楼',
        children: [
          {
            value: '1001',
            label: '1001'
          },
          {
            value: '1002',
            label: '1002'
          },
        ],
      },
      {
        value: '博学楼',
        label: '博学楼',
        children: [
          {
            value: '501',
            label: '501'
          },
          {
            value: '506',
            label: '506'
          },
        ],
      },
    ])
    // 弹窗-查询审批进度
    const dialogOfflineSelectSchedule = ref(false);
    // 按钮-查询审批进度
    const buttonOfflineSelectSchedule = async() => {
      dialogOfflineSelectSchedule.value = true;
      meetingTimeRange.value = [
        new Date(currentMeeting.value.room.meetingStartTime),
        new Date(currentMeeting.value.room.meetingEndTime),
      ];
      approvalTime.value = new Date(
        currentMeeting.value.application.approvalTime
      );
    };
    // 审批时间
    const approvalTime = ref();
    // 弹窗状态-会议纪要
    const dialogAssistance = ref(false);
    // 按钮-会议纪要
    const buttonAssistance = async () => {
      dialogAssistance.value = true;
      meetingDatas.value = [];
      meetings.value.forEach(meeting => {
        const formattedStartTime = moment(meeting.meetingStartTime).format("YYYY-MM-DD HH:mm:ss");

        meetingDatas.value.push({
          meetingId: meeting.meetingId,
          meetingSubject: meeting.meetingSubject,
          meetingDescription: `${meeting.meetingDescription} - ${formattedStartTime}`,
        })
      })
    };
    // 选择器默认数据
    const valueAssistance = ref('');
    // 选择器内容
    const meetingDatas = ref([]);
    // 按钮-会议纪要
    const createTask = async () => {
      try {
        const selectedMeeting = meetingDatas.value.find(meeting => meeting.meetingId === valueAssistance.value);
        // console.log(selectedMeeting.meetingId);
        
        // 得到文件的url(死数据)
        const getUrl = await axios
        .get('/file/file/getPresignedUrl', {
          params: {
            fileName: '/' + 235939 + '/' + '20小姐您好，这是我们的菜单，咖啡今日半价--叮咚社店内原创_爱给网_aigei_com.mp3',
          }
        });
        if(getUrl.data.code != 200) {
          ElMessage.error('获取文件url失败');
          return;
        }

        // 得到url
        const url = getUrl.data.data.url;

        // 使用获取到的URL创建任务
        const params = new URLSearchParams();
        params.append('meetingId', selectedMeeting.meetingId);
        params.append('url', url);
        const createTaskResponse = await axios.post('/meeting/test/createTask', params, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });

        if (createTaskResponse.data.code !== 200) {
          ElMessage.error('创建任务失败');
          return;
        }
        console.log(createTaskResponse.data);
        ElMessage.success('任务创建成功');

      } catch (error) {
        console.log(error);
        ElMessage.error('创建任务失败');
      }
    };
    // 返回对象
    return {
      userId,
      meetings,
      options,
      selectedOption,
      currentPage,
      pageSize,
      handleSelectOption,
      handlePageChange,
      filteredMeetings,
      filteredMeetingsTotal,
      dialogMeetingDetail,
      currentMeeting,
      meetingTimeRange,
      meetingEntryTime,
      isScreencapOptions,
      notificationSendTime,
      fetchMeetingDetail,
      deleteParticipate,
      userInfo,
      userInfoLoading,
      userInfoSearch,
      addParticipants,
      userSelect,
      dialogIsDisabled,
      updateMeeting,
      createMeeting,
      createMeetingInvite,
      buttonCreateMeeting,
      dialogCreateMeeting,
      dialogOfflineCreateMeeting,
      buttonOfflineCreateMeeting,
      offlineCreateMeeting,
      entryMeeting,
      tableCell,
      roomOptions,
      buttonOfflineSelectSchedule,
      dialogOfflineSelectSchedule,
      approvalTime,
      buttonAssistance,
      dialogAssistance,
      valueAssistance,
      meetingDatas,
      createTask,
    };
  },
};
</script>

<style>
/* .container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 60px;
  left: 0;
  background: transparent;
} */

.mx-1 {
  position: absolute;
  left: 25vh;
  top: 5vh;
  /* 优先级 */
  z-index: 1;
}

.recent-meeting {
  position: absolute;
  left: 25vh;
  top: 12vh;
}

.online-card {
  width: 50vh;
}

.offline-card {
  width: 60vh;
}

/* 滚动条整体样式 */
.recent-meeting::-webkit-scrollbar {
  height: 5px;
  /* 设置滚动条高度（水平滚动条的粗细） */
}

/* 滚动条轨道 */
.recent-meeting::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 轨道颜色 */
  border-radius: 5px;
}

/* 滚动条滑块 */
.recent-meeting::-webkit-scrollbar-thumb {
  background: #888;
  /* 滑块颜色 */
  border-radius: 5px;
}

/* 鼠标悬停在滑块上的样式 */
.recent-meeting::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* 滑块悬停颜色 */
}

.mode-button {
  position: absolute;
  left: 38vh;
  top: 7.5vh;
  /* 优先级 */
  z-index: 1;
}

.mx-2 {
  position: absolute;
  left: 25vh;
  top: 38vh;
  /* 优先级 */
  z-index: 1;
}

.create-online-meeting {
  position: absolute;
  left: 25vh;
  top: 45vh;
}

.create-offline-meeting {
  position: absolute;
  left: 56vh;
  top: 45vh;
}

.select-offline-meeting {
  position: absolute;
  left: 87vh;
  top: 45vh;
}

.resource-manage {
  position: absolute;
  left: 118vh;
  top: 42vh;
}

.status-blue {
  color: #409eff;
}

.status-green {
  color: #67c23a;
}

.status-red {
  color: #f56c6c;
}

.status-yellow {
  color: #F08200;
}

.line {
  width: 2px;
  background-color: var(--el-border-color);
  margin: 0 10px;
  /* 设置左右间隔 */
}

.warning-cell {
  background-color: #fffaf6;
}

.success-cell {
  background-color: #f5f9ff;
}

.status-gray {
  color: #909399;
}

.mx-3 {
  position: absolute;
  left: 25vh;
  top: 64vh;
  /* 优先级 */
  z-index: 1;
}

.minutes-manage {
  position: absolute;
  left: 25vh;
  top: 71vh;
}

.minutes-manage-info {
  position: absolute;
  left: 56vh;
  top: 71vh;
}

.manuscript {
  position: absolute;
  left: 87vh;
  top: 71vh;
}

.manuscript-info {
  position: absolute;
  left: 118vh;
  top: 71vh;
}

.custom-dialog .el-dialog__body {
  max-height: calc(60vh);
  /* 根据需要调整高度 */
  overflow-y: auto;
  padding-right: 5vh;
}

/* 滚动条整体样式 */
.custom-dialog .el-dialog__body::-webkit-scrollbar {
  width: 5px;
  /* 设置滚动条高度（垂直滚动条的粗细） */
}

/* 滚动条轨道 */
.custom-dialog .el-dialog__body::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 轨道颜色 */
  border-radius: 5px;
}

/* 滚动条滑块 */
.custom-dialog .el-dialog__body::-webkit-scrollbar-thumb {
  background: #888;
  /* 滑块颜色 */
  border-radius: 5px;
}

/* 鼠标悬停在滑块上的样式 */
.custom-dialog .el-dialog__body::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* 滑块悬停颜色 */
}
</style>
